<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRoute } from 'vue-router';
import { isVerification, getSmsCode, saveCustomer, yiDunProtector } from '@/api/customer';
import { ElMessage, ElMessageBox } from 'element-plus';

const show = ref(false)
const show2 = ref(false)
const show3 = ref(false)
const show4 = ref(false)
const agree = ref(false)
const isVer = ref(1)
const countdown = ref(60)
const codeText = ref('发送验证码')
const disabled = ref(false)
const route = useRoute()
const dunData = ref({})
const dunToken = ref('')
const captchaButton = ref(null)
const captchaIds = ref(['z3cr1uu9', '1sp88n41', '1bk2rsps']) 
const captcha = ref(null)
const codeLoading = ref(false)
const form = ref({
	name: '',
	phone: '',
	company: 'ls',
	code: '',
	type: '1',
	search_keywords: '',
	first_url: '',
    baidu_logid_url: null,
    qhclickid: null
})

const getParams = async () => {
    const firstUrl = window.location.href
    const cleanQueryString = firstUrl.replace(/&amp;/g, '&')
    const urlParams = new URLSearchParams(window.location.search);
    const params = {};

    for (const [key, value] of urlParams.entries()) {
        // 移除参数名和值中的空格
        const trimmedKey = key.replace(/\s+/g, '');  // 移除参数名中的空格
        const trimmedValue = value.replace(/\s+/g, '');  // 移除值中的空格
        params[trimmedKey] = trimmedValue;
    }
    form.value.search_keywords = params.words
    form.value.first_url = firstUrl
	if(params.bd_vid) {
		form.value.baidu_logid_url = cleanQueryString
	}
	if(params.qhclickid) {
		form.value.qhclickid = params.qhclickid
	}
    console.log('---------', form.value)
}
getParams()

const getVerification = () => {
	isVerification(form.value).then(res => {
		isVer.value = res.data.on_sms
	})
}
getVerification()

const showModal = type => {
    switch(type) {
        case 1:
            show.value = true
            break
        case 2:
            show2.value = true
            break
        case 3:
            show3.value = true
            break
        case 4:
            show4.value = true
            break
        default :
            break
    }
}

const onClose = type => {
    switch(type) {
        case 1:
            show.value = false
            break
        case 2:
            show2.value = false
            break
        case 3:
            show3.value = false
            break
        case 4:
            show4.value = false
            break
        default :
            break
    }
    getParams()
}

const onSubmit = async () => {
	try {
		await getWyDunToken()
		form.value.wy_dun_token = dunToken.value
		form.value.sceneData = [{verifyType: "upLinkSMS"}]
		form.value.search_keywords = route.query.words;
		const res = await saveCustomer(form.value);
		if (res.code === 0) {
            ElMessage.success('提交成功');
            show.value = false
            show2.value = false
            show3.value = false
            show4.value = false
            form.value = {
                name: '',
                phone: '',
                company: 'ls',
                code: '',
                type: '1',
                search_keywords: '',
                first_url: ''
            }
            window._agl && window._agl.push(['track', ['success', {t: 3}]])
		}
	} catch (error) {
		console.error('提交失败:', error);
	}
}

const captchaVerifyCallback = async (captchaVerifyParam) => {
	form.value.search_keywords = route.query.words;
	form.value.captcha_verify = captchaVerifyParam
	const res = await saveCustomer(form.value);
	return {
		captchaResult: res.data.captcha_result === 0 ? false : true,
		bizResult: res.code === 0 ? true : false,
	}
}
const getInstance = (instance) => {
	captcha.value = instance
}
const onBizResultCallback = (bizResult) => {
	if (bizResult) {
		ElMessage.success('提交成功');
            show.value = false
            show2.value = false
            show3.value = false
            show4.value = false
            form.value = {
                name: '',
                phone: '',
                company: 'ls',
                code: '',
                type: '1',
                search_keywords: '',
                first_url: ''
            }
            window._agl && window._agl.push(['track', ['success', {t: 3}]])
	}
    getParams()
}

const sendSms = async () => {
	await getWyDunToken()
	await getWyDun({ token: dunToken.value, phone: form.value.phone })
	if(dunData.value.risk_level === 2 || dunData.value.risk_level === 3) {
		ElMessageBox.alert(
			'系统错误',
			'提示',
			{
				confirmButtonText: '确认',
				type: 'error',
			}
		);
		return false
	}
	codeLoading.value = true;
	try {
		const res = await getSmsCode(form.value);
		if (res.code === 0) {
			ElMessage.success('发送成功');
			startCountdown();
		}
	} catch (error) {
		console.error('发送验证码失败:', error);
	} finally {
		codeLoading.value = false;
	}
}

const startCountdown = () => {
	countdown.value = 60; // Assuming countdown starts from 60 seconds
	const timer = setInterval(() => {
		if (countdown.value > 0) {
			disabled.value = true
			codeText.value = `等待 ${countdown.value} 秒`;
			countdown.value--;
		} else {
			disabled.value = false
			codeText.value = '发送验证码';
			clearInterval(timer);
		}
	}, 1000);
}

const getWyDun = async (data) => {
	const res = await yiDunProtector(data)
	dunData.value = res.data
	console.log(res)
	if(res.data.risk_level === 2 || res.data.risk_level === 3) {
		window.location.href = 'http://p99.biaofw.com/'
	}
}

const getWyDunToken = async () => {
	const neg = createNEGuardian({ productId: 'YD00973669355806', timeout: 6000 })
	const token = await neg.getToken()
	dunToken.value = token.token
}

onMounted(async () => {
	await getWyDunToken()
	await getWyDun({ token: dunToken.value, sceneData: [{ verifyType: 'upLinkSMS' }] })
})

onBeforeUnmount(() => {
	captchaButton.value = null;

	// 必须删除相关元素，否则再次mount多次调用 initAliyunCaptcha 会导致多次回调 captchaVerifyCallback
	document.getElementById('aliyunCaptcha-mask')?.remove();
	document.getElementById('aliyunCaptcha-window-popup')?.remove();
})
</script>

<template>
  <div>
    <div class="top">
        <img src="@/assets/top.png"  />
    </div>
    <!-- 免费查询 -->
    <div class="chaxun2">
        <div class="chaxunwrap">
            <div class="free">免费</div>
            <p class="cha_title">商标注册查询服务</p>
            <p class="iszc"><img src="@/assets/miao.png"  /><span>判定您的商标能否注册</span></p>
            <p class="sname">商标名称</p>
            <input v-model="form.name" type="text" placeholder="请输入商标名称" class="shopping" id="sbname" name="sbname" />
            <p class="sname">联系电话</p>
            <input v-model="form.phone" type="text" placeholder="请输入接收查询结果的手机号码" class="tel1" id="tel" name="tel" />
            <!-- <p class="sname">验证码</p>
            <input type="text" placeholder="请输入接收查询结果的手机号码" class="tel1" id="tel" name="tel" /> -->
            <p class="chaxun" id="zixun1">
                <a @click="showModal(4)"><img src="@/assets/icon-scale.png" />立即查询</a>
            </p>
            <p class="chaxuned">已有<span>3715486</span>人进行查询</p>
        </div>
    </div>
    <!-- 新闻动态 -->
    <div class="newsbox">
        <div class="newswrap">
            <img src="@/assets/newswrapbg.png" />
            <div class="newsmost">
                <p>最新查询动态</p>
                <div class="xianbox"></div>
                <div class="canwrap" id="s2">
                    <div class="canbox">
                        <div class="can flex_between">
                            <p class="name">非凡* </p>
                            <p class="shangb"><span>93.2%</span>相似商标数<span>1</span>个</p>
                            <p class="command">建议注册</p>
                        </div>
                        <div class="can flex_between">
                            <p class="name">欣欣*</p>
                            <p class="shangb"><span>73.7%</span>相似商标数<span>23</span>个</p>
                            <p class="command">不能注册</p>
                        </div>
                        <div class="can flex_between">
                            <p class="name">王**</p>
                            <p class="shangb"><span>92.1%</span>相似商标数<span>6</span>个</p>
                            <p class="command">建议注册</p>
                        </div>
                        <div class="can flex_between">
                            <p class="name">文*才</p>
                            <p class="shangb"><span>97.9%</span>相似商标数<span>3</span>个</p>
                            <p class="command">建议注册</p>
                        </div>
                        <div class="can flex_between">
                            <p class="name">欣欣*2</p>
                            <p class="shangb"><span>73.7%</span>相似商标数<span>23</span>个</p>
                            <p class="command">不能注册</p>
                        </div>
                        <div class="can flex_between">
                            <p class="name">欣欣*3</p>
                            <p class="shangb"><span>73.7%</span>相似商标数<span>23</span>个</p>
                            <p class="command">不能注册</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- 专业顾问为您解答 -->
        <div class="solutionbox">
            <p>专业顾问为您解答</p>
            <div class="processwrap">
                <div class="process" @click="showModal(4)">
                    <img src="@/assets/solution1.png"  />
                    <p>商标注册<span>多少钱？</span>?</p>
                    <a><img src="@/assets/point.png"  class="pointer" /></a>
                    <img src="@/assets/connect.png"  class="connect1" />
                    <img src="@/assets/connect.png" class="connect2" />
                </div>
                <div class="process" @click="showModal(4)">
                    <img src="@/assets/solution2.png"  />
                    <p>商标注册需要<span>多长时间？</span></p>
                    <a><img src="@/assets/point.png" class="pointer" /></a>
                    <img src="@/assets/connect.png"  class="connect1" />
                    <img src="@/assets/connect.png" class="connect2" />
                </div>
                <div class="process" @click="showModal(4)">
                    <img src="@/assets/solution3.png" />
                    <p>我的商标<span>与人相同</span>怎么办？</p>
                    <a><img src="@/assets/point.png"  class="pointer" /></a>
                </div>
                <div class="process" @click="showModal(4)">
                    <img src="@/assets/solution4.png"  />
                    <p>注册商标可以<span>在哪申请？当地</span>申请吗？</p>
                    <a><img src="@/assets/point.png" class="pointer" /></a>
                    <img src="@/assets/connect.png"  class="connect1" />
                    <img src="@/assets/connect.png"class="connect2" />
                </div>
                <div class="process" @click="showModal(4)">
                    <img src="@/assets/solution5.png" />
                    <p>商标注册需要<span>哪些资料？</span></p>
                    <a><img src="@/assets/point.png"  class="pointer" /></a>
                    <img src="@/assets/connect.png"  class="connect1" />
                    <img src="@/assets/connect.png"  class="connect2" />
                </div>
                <div class="process" @click="showModal(4)">
                    <img src="@/assets/solution6.png" />
                    <p>很着急，能直接<span>买商标吗？</span></p>
                    <a><img src="@/assets/point.png"  class="pointer" /></a>
                </div>
            </div>
        </div>
        <!-- 商标注册详细资料百科全书 -->
        <div class="zcdetailbox" @click="showModal(3)">
            <p>商标注册详细资料百科全书</p>
            <p>《商标详细流程及所需资料》</p>
            <img src="@/assets/down2.png"  class="ljdown" />
        </div>
    </div>


    <!-- 申请商标的好处 -->
    <div class="zcsb">
        <p>申请商标的好处</p>
        <div class="beneficialbox beneficial1">
            <p>品牌树立</p>
            <p>区别商标或服务出处，引导消费者认品牌消费的习惯，对于扩大自身产品的商业影响力有至关重要的作用。</p>
            <p><a>未注册商标可以直接使用吗？ >></a></p>
        </div>
        <div class="beneficialbox beneficial2">
            <p>商标投资</p>
            <p>选择一个具有新颖创意的商标并加以注册，就相当于买下了一份永远升值的股票，具有非常高的经济利益。</p>
            <p @click="showModal(2)"><a>我想买卖商标 >></a></p>
        </div>
        <div class="beneficialbox beneficial3">
            <p>入驻电商及网络平台</p>
            <p>企业拓展网络营销宣传以及消费市场入驻电商平台的资质要求。</p>
            <p><a>2018年入驻天猫等平台条件汇总 >></a></p>
        </div>
        <div class="beneficialbox beneficial4">
            <p>无形资产</p>
            <p>商标使用时间长后可申请成为驰名商标，形成了无形资产，具有了价值，可作为商标出售或转让。</p>
            <p><a>一个商标价值多少钱? >></a></p>
        </div>
    </div>
    <!-- 商标注册成功率换算系统 -->
    <div class="hsxtbox">
        <div class="hsxtwrap">
            <div class="computerwrap">
                <img src="@/assets/computer.png" class="computer" />
                <p class="sname">商标名称</p>
                <input v-model="form.name" type="text" placeholder="请输入商标名称" class="sbmc" id="sbname2" name="sbname2" />
                <p class="sname">所属行业</p>
                <input type="text" placeholder="请输入所属行业" class="sshy"  id="Industry" name="Industry"/>
                <p class="sname">联系电话</p>
                <input v-model="form.phone" type="text" placeholder="请输入接收查询结果的电话号码" class="yxdh" id="tel2" name="tel2" />
                <p class="chaxun chaxun1" id="chaxun" @click="showModal(4)">
                    <a><img src="@/assets/icon-scale.png" />立即查询</a>
                </p>
                <p class="chaxuned">已有<span>3715486</span>人进行查询</p>
            </div>
            <!-- 与您相同商标数 -->
            <div class="sbnum flex_base">
                <img src="@/assets/tjbox1.png"  />
                <img src="@/assets/tjbox1.png" />
            </div>
        </div>
    </div>
    <!-- 专业顾问弹窗 -->
    <div class="expertwrap" v-if="show">
        <div class="expertbox3">
            <p class="expert_answer">专业顾问为您解答<img src="@/assets/icon-closew.png"  class="closew" @click="onClose(1)" /></p>
            <p class="question mt">
                <a><img src="@/assets/icon-bdot.png"/>未注册商标可以使用吗？</a>
            </p>
            <p class="question">
                <a><img src="@/assets/icon-bdot.png"  />我想买卖商标，该怎么办？</a>
            </p>
            <p class="question">
                <a><img src="@/assets/icon-bdot.png"  />如何入驻电商及网络平台？</a>
            </p>
            <p class="question">
                <a><img src="@/assets/icon-bdot.png"  />我的商标值多少钱？</a>
            </p>
            <input type="text" placeholder="请输入接收查询结果的电话号码" class="tel5" id="tel6" name="tel6" />
            <p class="chaxun" id="chaxun555" @click="onSubmit">
                <a >手机验证获取答案</a>
            </p>
        </div>
    </div>
    <!-- 问题弹窗 -->
    <div class="expertwrap2" v-if="show2">
        <div class="expertbox1">
            <p class="expert_answer">立即获取权威答案<img src="@/assets/icon-closew.png"  class="closew2" @click="onClose(2)" /></p>
            <p class="question mt">
                <a><img src="@/assets/icon-bdot.png"  />商标注册<span>多少钱？</span></a>
            </p>
            <p class="question">
                <a><img src="@/assets/icon-bdot.png"  />商标注册需要<span>多长时间？</span></a>
            </p>
            <p class="question">
                <a><img src="@/assets/icon-bdot.png" />我的商标<span>与人相同</span>怎么办？</a>
            </p>
            <p class="question">
                <a><img src="@/assets/icon-bdot.png" />注册商标可以<span>在哪申请？当地</span>申请吗？</a>
            </p>
            <p class="question">
                <a><img src="@/assets/icon-bdot.png"  />注册商标需要<span>哪些资料？</span></a>
            </p>
            <p class="question">
                <a><img src="@/assets/icon-bdot.png"  />很着急，能直接<span>买商标吗？</span></a>
            </p>
            <input type="text" placeholder="请输入接收查询结果的电话号码" class="tel2" id="tel5" name="tel5" />
            <div class="flex" style="margin-top:10px">
                <input v-model="form.code" type="text" placeholder="请输入验证码" class="shopname4 inp" id="tel4" name="tel4" />
                <button class="btn" @click="sendSms">{{ codeText }}</button>
            </div>
            <p class="chaxun" id="chaxun555" @click="onSubmit">
                <a>手机验证获取答案</a>
            </p>
        </div>
    </div>
    <!-- 下载弹窗 -->
    <div class="downwrap" v-if="show3">
        <div class="down">
            <div class="downing">
                <p><img src="@/assets/icon-ljdown.png"  />正在下载商标注册详细资料百科全书</p>
                <img src="@/assets/icon-close2.png"  class="closedown" @click="onClose(3)" />
            </div>
            <input type="text" placeholder="请输入手机号" class="tel3" id="tel3" name="tel3" />
            <div class="flex" style="margin-top:10px">
                <input v-model="form.code" type="text" placeholder="请输入验证码" class="shopname4 inp" id="tel4" name="tel4" />
                <button class="btn" @click="sendSms">{{ codeText }}</button>
            </div>
            <p class="chaxun" id="chaxun555" @click="onSubmit">
                <a>手机验证获取资料</a>
            </p>
            
            <p class="chaxuned">（为了信息的安全性，请输入正确手机号码获取资料）</p>
        </div>
    </div>
    <!-- 专业顾问弹窗 -->
    <div class="expertwrap3" v-if="show4">
        <div class="expertbox2">
            <p class="expert_answer">商标查询系统<img src="@/assets/icon-closew.png" class="close4" @click="onClose(4)" /></p>
            <p class="sname">商标名称</p>
            <input v-model="form.name" type="text" placeholder="请输入商标名称" class="shopname1" id="sbname4" name="sbname4" />
            <p class="sname">联系电话</p>
            <input v-model="form.phone" type="text" placeholder="请输入接收查询结果的电话号码" class="shopname4" id="tel4" name="tel4" />
            <p class="sname">联系电话</p>
            <div class="flex" v-if="isVer">
                <input v-model="form.code" type="text" placeholder="请输入验证码" class="shopname4 inp" id="tel4" name="tel4" />
                <button class="btn" @click="sendSms">{{ codeText }}</button>
            </div>
            <p class="chaxun" id="chaxun555" @click="onSubmit">
                <a><img src="@/assets/icon-scale.png" />立即查询</a>
            </p>
            <p class="chaxuned">已有<span>3715486</span>人进行查询</p>
        </div>
    </div>
    <div class="zhezhao" v-if="agree"></div>
        <div class="tanchuang" v-if="agree">
            <div class="agree-body">
                <p style="text-indent: 0;">尊敬的用户：</p>
                <p>重要提示：本协议由广告客户（以下简称“我方”）制定，旨在明确您通过本网站提交个人信息时的权利义务关系。请您在提供信息前仔细阅读本协议，您的提交行为即视为已完全理解并同意本协议所有条款。
                            </p>
                            <p>一、信息收集范围与目的</p>
                            <p>1、信息类型：为实现广告推广及服务优化，您需按页面提示提供姓名、联系方式、位置信息等必要数据（统称“客户信息”）。
                            </p>
                            <p>2、使用目的：<br />
                                - 通过电话/邮件等方式向您推送商品或服务信息；<br />
                                - 支持抽奖、优惠券发放等营销活动参与；<br />
                                - 优化广告投放效果及用户行为分析；<br />
                                - 核实信息真实性，防范欺诈风险；<br />
                                - 提供页面交互功能及发送重要通知。
                            </p>
                            <p>3、拒绝权利：您可拒绝提供非必要信息，但可能影响部分服务获取。
                            </p>
                            <p>二、信息处理与共享规则</p>
                            <!--<p>4、如本服务页面涉及推荐附近门店信息的，您可自主选择填写您附近的门店，也可授权我方或蹊径获得您的地理位置信息，以实现自动在本页面向您展示您附近门店信息的功能。本页面向您申请地理位置信息，仅用于前述门店信息自动展示之目的，且仅用于当次展示。如您不同意地理位置信息的授权，您可选择“拒绝”，我方将不会自动向您推荐附近门店信息，您可通过手动选择完成该等信息的填写。</p>-->
                            <p>1、第三方合作：我方可能委托经销商、广告服务商、数据分析机构等合作伙伴处理信息，用于： <br />
                                - 实现推广目的； <br />
                                - 数据监测与技术支持； <br />
                                - 用户需求调研。
                            </p>
                            <p>2、安全保障：我方及第三方将采取加密存储、访问权限控制等措施，确保信息安全。因我方责任导致的信息泄露由我方承担全部责任</p>
                            <p>三、用户权利与义务</p>
                            <p>1、信息准确性：您需保证提交内容真实有效，如有变更请及时更新。</p>
                            <p>2、权利行使：您可随时通过客服渠道（电话/邮箱）申请： <br />
                                - 查询、更正个人信息； <br />
                                - 删除非必要信息（法律法规另有要求除外）； <br />
                                - 撤回信息处理授权。 </p>
                            <p>3. 未成年保护：未满18周岁用户需在监护人指导下使用本服务，监护人有权代为管理信息。</p>
                            <p>四、其他条款 </p>
                            <p>1. 协议更新：我方有权修订本协议，更新内容将通过网站公告形式告知。 </p>
                            <p>2. 争议解决：因本协议产生的争议，双方同意通过我方所在地人民法院诉讼解决。</p>
                            <p>五、同意声明 </p>
                            <p>当您点击“提交”或“同意”按钮时，即表示您已充分理解并同意本协议的所有条款，授权我方按本协议规定处理您的个人信息。</p>
            </div>
            <div style="background:#f25623;padding:0.1rem 0;width:100%;margin-top:20px;color:#fff;"
                @click="agree = false">关闭</div>
        </div>
	 <p class="domain" style="color: #cccccc80;text-align: center;font-size: 13px;line-height: 30px;padding-top: 0px;"></p>
  </div>
  <div id="captcha-element"></div>
</template>

<style scoped>
.flex {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.inp {
    flex: 1;
    margin-top: 0 !important;
    padding: 0 !important;
}
.btn {
    width: 3rem;
    background: linear-gradient(180deg, #f25623, #f28023);
    border: 0;
    height: 1.25rem;
    color: #fff;
}
.chacne-form-tip {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.val_agree {
    width: 0.4rem;
    height: 0.4rem;
}
.zhezhao{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    z-index: 88;
}
.tanchuang{
    width: 8.25rem;
    margin: 0 auto;
    position: fixed;
    top: 2.5rem;
    background: #ffffff;
    box-shadow: 0 0 10px 4px rgba(0,0,0,0.2);
    left: 3.35rem;
    margin-left: -3.0rem;
    z-index: 9999999;
    text-align: center;
    padding: 0.56rem;
    max-height: 7rem;
    overflow-y: auto;
}
.tanchuang>img{
    width: 30%;
}
.tanchuang>h2{
    font-size: 0.42rem;
    font-weight: 700;
}
.tanchuang>h3{
    font-size: 0.24rem;
    color: #999;
    position: relative;
}
.tanchuang>h3:before{
    content: "";
    height: 0.01rem;
    width: 0.4rem;
    background: #999;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: 50%;
}
.tanchuang>h3:after{
    content: "";
    height: 0.01rem;
    width: 0.4rem;
    background: #999;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: 0;
    top: 50%;
}
.tanchuang .form{
    margin-top: 0.24rem;
}
.tanchuang .form input[type=text]{
    width: 100%;
    height: 0.96rem;
    line-height: 0.96rem;
    margin-top: 0.34rem;
    border: 1px solid #999;
    border-radius: 0.05rem;
    text-indent: 1em;
    box-shadow: 0 0 0.04rem 0.02rem rgba(0,0,0,0.1) inset;
}
.tanchuang .form input[type=button]{
    width: 100%;
    height: 0.96rem;
    line-height: 0.96rem;
    margin-top: 0.34rem;
    border: 0;
    border-radius: 0.05rem;
    background: #fe5308;
    color: #ffffff;
    font-weight: 700;
}
.tanchuang>i{
    position: absolute;
    right: 0.16rem;
    top: 0.16rem;
    width: 0.56rem;
    height: 0.56rem;
}
.tanchuang>i img{max-width: 100%;}

.chacne-form-tip {
    margin-top: .27rem;
    width: 100%;
    height: .37rem;
    background: url(../img/mobile_tip.e7fe11ff.png) no-repeat;
    background-size: contain;
    background-position: center center;
    text-align: left;
}

.tanchuang .sub-title {
    height: .75rem;
    line-height: .75rem;
    background: #ffe5dc;
}
/*.tanchuang .sub-title p:before {*/
    /*position: absolute;*/
    /*content: '';*/
    /*left: -.37rem;*/
    /*top: 50%;*/
    /*-ms-transform: translateY(-50%);*/
    /*transform: translateY(-50%);*/
    /*width: .32rem;*/
    /*height: .32rem;*/
    /*background: url(../img/tip_icon.e271b58a.png) no-repeat;*/
    /*background-size: contain;*/
    /*background-position: center center;*/
/*}*/
</style>
